<template>
  <div class="main-Header">
    <div class="Header">
      <router-link class="left" tag="div" to="/">
        <!-- <img :src="require('@/assets/avatar.jpg')" alt="" srcset="" /> -->
        <lottie-animation
          :animationData="require('@/assets/icon/bicycle-riding.json')"
          :loop="true"
          :speed="1"
          style="width: 70px"
        />

        <h4
          :style="{ fontSize: IOS == 'pc' ? '1.5rem' : '' }"
          style="cursor: pointer"
        >
          都是朕的江山！- 个人博客
        </h4>
      </router-link>
      <!-- <div class="left">
      
    </div> -->
      <div
        @click="NavBarClick"
        class="right"
        :class="IOS == 'mobile' ? 'right-mobile' : 'right-pc'"
      >
        <router-link to="/">首页</router-link>
        <router-link to="/works">个人作品</router-link>
        <router-link to="/about">关于我</router-link>
      </div>

      <ul v-show="IOS == 'mobile'" class="NavBar" @click="NavBarClick">
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</template>
<script>
import { TimelineMax, gsap } from "gsap";
import { CSSRulePlugin } from "gsap/CSSRulePlugin";

gsap.registerPlugin(CSSRulePlugin);
export default {
  data() {
    return {
      IOS: localStorage.getItem("IOS"),
      anim: {},
      is: false,
    };
  },
  created() {
    console.log("test-IOS", localStorage.getItem("IOS"));
  },
  mounted() {
    this.anim = new TimelineMax({ paused: true });
    this.initAn();
  },
  methods: {
    initAn() {
      let an = this.anim,
        time = 0.5;
      an.to(".NavBar li:nth-child(1)", time, { y: 13, rotate: 45 })
        .to(".NavBar li:nth-child(2)", time, { opacity: 0 }, 0)
        .to(".NavBar li:nth-child(3)", time, { y: -12, rotate: -45 }, 0)
        .to(".right-mobile", time, { right: "-12%" }, 0);
    },
    NavBarClick() {
      this.is
        ? (this.anim.reversed(true), (this.is = false))
        : (this.anim.play(), (this.is = true));
    },
  },
};
</script>
<style lang="scss" scoped>
.main-Header {
  position: fixed;
  width: 100%;
  z-index: 9999;
  background-color: #fff;
}
.Header {
  display: flex;
  justify-content: space-between;
  margin: 0 10%;
  height: 70px;
  align-items: center;
  position: relative;
  .left {
    display: flex;
    align-items: center;
    cursor:pointer img {
      width: 50px;
      border-radius: 15px;
    }
    h4 {
      padding: 0 10px;
      font-size: 1rem;
    }
  }
  .right {
    display: flex;
    a {
      color: #22262b;
    }
  }

  .NavBar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 30px;
    li {
      border-radius: 4px;
      &:nth-child(1) {
        height: 5px;
        background-color: #87e3ce;
      }
      &:nth-child(2) {
        height: 5px;
        background-color: #87e3ce;
      }
      &:nth-child(3) {
        height: 5px;
        background-color: #87e3ce;
      }
    }
  }
}

.right-pc {
  align-items: center;
  justify-content: flex-end;
  width: 40%;
  a {
    padding: 0 20px;
    height: 100%;
    line-height: 70px;
    color: #22262b;
    font-size: 20px;
    font-weight: 700;
  }
}
.right-mobile {
  background-color: #fff;
  flex-direction: column;
  position: absolute;
  bottom: -100vh;
  right: -175px;
  width: 135px;
  height: 100vh;
  align-items: center;
  a {
    display: block;
    width: 100%;
    text-align: center;
    padding: 20px 0;
  }
}
</style>